import React, { useEffect, useRef } from "react";
import * as echarts from 'echarts';
const axisOption = {  
    legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
    },
    // grid: {
    //     left: '3%',
    //     right: '4%',
    //     bottom: '3%' 
    // }, 
    
    xAxis: {
        type: 'category', 
        data: [], 
        // axisLabel: {
        //     rotate: 45,  // 旋转45度，避免重叠
        //     interval: 0, // 设置显示所有标签
        //   },
    },
    yAxis: {
        type: 'value'
    },
    series: []
}

const normalOption = { 
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
    },
    // grid: {
    //     left: '3%',
    //     right: '4%',
    //     bottom: '3%', 
    // },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    // xAxis: {
    //     type: 'category', 
    //     data:[] 
    // },
    // yAxis: {
    //     type: 'value'
    // },
    series: []
    // series: [
    //     {
    //         name: 'Email',
    //         type: 'line',
    //         stack: 'Total',
    //         data: [120, 132, 101, 134, 90, 230, 210]
    //     },
    //     {
    //         name: 'Union Ads',
    //         type: 'line',
    //         stack: 'Total',
    //         data: [220, 182, 191, 234, 290, 330, 310]
    //     },
    //     {
    //         name: 'Video Ads',
    //         type: 'line',
    //         stack: 'Total',
    //         data: [150, 232, 201, 154, 190, 330, 410]
    //     },
    //     {
    //         name: 'Direct',
    //         type: 'line',
    //         stack: 'Total',
    //         data: [320, 332, 301, 334, 390, 330, 320]
    //     },
    //     {
    //         name: 'Search Engine',
    //         type: 'line',
    //         stack: 'Total',
    //         data: [820, 932, 901, 934, 1290, 1330, 1320]
    //     }
    // ]
}

const Echarts = ({ style,chartData,isAxisChart =true }) => {
    const echartRef = useRef();
    let echartObj= useRef(null);
    useEffect(() => {
        let options; 
        echartObj.current=echarts.init(echartRef.current);
        if(isAxisChart)
        {
            axisOption.xAxis.data=chartData.xData;
            axisOption.series=chartData.series;
            options=axisOption;
        }else
        {
            normalOption.series=chartData.series;
            options=normalOption;
        }
        echartObj.current.setOption(options) 
    },[chartData])
    return (
        <div style={style} ref={echartRef}></div>
    )
}
export default Echarts